let wrapperBox=document.querySelector(".wrapper");//轮播图图片容器
let bannerBox=document.getElementById("bannerBox");//整个轮播图的盒子
let slides=null;//所有的图片盒子
let spans=null;//所有的小圆点
let pagination=document.querySelector(".pagination");//小圆点容器
let w=bannerBox.offsetWidth;//一个图片的宽度
let step=0;//设置初始步长
let count=null;//总图片长度
let timer=null;
let data=null;

//获取数据+循环渲染
function start(){
    //1.获取数据
    let xhr=new XMLHttpRequest;
    xhr.open("get","data.json",false);
    xhr.onreadystatechange=function(){
        if(xhr.readyState===4&&xhr.status===200){
             data=JSON.parse(xhr.response);
        }
    }
    xhr.send();

    //2.循环渲染
    let strImg="",strCricle="";
    data.forEach((item,index)=>{
        strImg+=`<div class="slide">
              <img src="${item.pic}" alt="">
        </div>`;
        strCricle+=`<span class="${index==0?'active':''}" index="${index}"></span>`
    })
    //最后一个img 要复制第一个
    strImg+=`<div class="slide">
            <img src="${data[0].pic}" alt="">
        </div>`;

    wrapperBox.innerHTML=strImg;
    pagination.innerHTML=strCricle;

    slides=document.querySelectorAll(".slide");//所有的图片盒子
    spans=document.querySelectorAll("span");//所有的小圆点
    count=slides.length;//总图片长度
}
start()

//自动轮播
function autoPlay(){
    step++;
    if(step>count-1){
        wrapperBox.style.transitionDuration="0s";//动画立刻停止
        step=0;//4--0
        wrapperBox.style.left=`0px`;//展示第一幅图

        wrapperBox.offsetHeight;//获取属性

        wrapperBox.style.transitionDuration="0.3s";//动画立刻开启
        step=1;//0--1
    }
    wrapperBox.style.left=`-${step*w}px`;
    activeCricle();//小圆点激活
}
timer=setInterval(autoPlay,1000)

//移入盒子，定时器停止 mouseenter/mouseover
bannerBox.onmouseenter=function(){
  clearInterval(timer);
  timer=null;
}
//移出盒子，定时器重新开始  mouseleave/mouseout
bannerBox.onmouseleave=function(){
   timer=setInterval(autoPlay,1000)
}

//小圆点激活
function activeCricle(){
    //step 0,1,2,3
    //temp 0,1,2,3
    let temp=step;
    if(step==count-1){//step==3
        temp=0;//0,1,2,0
    }
    spans.forEach((item)=>{
        let index=+item.getAttribute("index");//0,1,2
        if(index==temp){
           item.className="active";
        }else{
           item.className="";
        }
    })
}


bannerBox.onclick=function(e){//event事件对象
   //console.log(e.target);//目标元素
   //console.log(e.target.tagName);//目标元素的标签名  全大写
   //console.log(e.target.className);//目标元素的class的值 
   if(e.target.tagName=="SPAN"){//小圆点
      let index=+e.target.getAttribute("index");
      //1. 高亮刚好是当前图片，不需要切换一次了
      //2.step刚好是最后重复的图片,index刚好是0,不需要将step改为0,如果改为0就会倒回去
      if(index==step||(step==(count-1)&&index==0)){//排除两种情况
        return;
      }
      step=index;
      wrapperBox.style.left=`-${step*w}px`;
      activeCricle();//小圆点高亮
   }
   if(e.target.className.includes("prev")){//上一个
        step--;//3-2-1-0-3
        if(step<0){
            wrapperBox.style.transitionDuration="0s";//无动画
            step=count-1;
            wrapperBox.style.left=`-${step*w}px`;//最后一幅图

            wrapperBox.offsetHeight;//刷新队列

            wrapperBox.style.transitionDuration="0.3s";//开启动画
            step=count-2;
        }
        wrapperBox.style.left=`-${step*w}px`;
        activeCricle();//小圆点
   }
   if(e.target.className.includes("next")){//下一个
      autoPlay();
   }
}
